<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页设计</title>
<meta charset="utf-8">

<style>
  *{padding: 0;margin: 0;}

body {
  margin: 0;
}
.column {
  float: left;
  width: 100%;
}
/* 头部 */
.header {
  background-color:grey;
  padding: 10px;
  text-align: center;
  color: white;
}

/* 导航条 */
.topnav {
  list-style-type: none;
  overflow: hidden;
  background-color: #333;
  margin:0;
	padding:0;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 25px;
}

/* 链接 - 修改颜色 */
.topnav a:hover:not(active) {
  background-color: #ddd;
  color: black;
  border-radius: 25px;
}
a
{
    display:block;
    width:100px;
}
.picture {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* 卡片 */
.card {
  background-color:white(36, 163, 47, 0.336);
  padding: 20px;
  margin-top: 20px;
}
#grad1 {
    height: 200px;
    background-color:white;
    background-image: linear-gradient(to right, white , grey);
}
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}
</style>
</head>
<body>

<div class="header">
  <h1>
    狗狗之家</h1>
    <img src="https://uploadfile.huiyi8.com/2018/af/6c/66/35/412054.jpg" alt="狗狗大全" width="200" height="200">
</div>
 
<div class="topnav">
  <a class="active" href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/runoob.html">首页</a>
  <a href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/Untitled-1.html">狗狗大全</a>
  <a href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/Untitled-2.html">狗粮</a>
  <a href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/Untitled-3.html">狗狗日常用品</a>
   <a  href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/%E8%A1%A8%E5%8D%95.html" style="float:right">意见反馈</a>
</div>

<div class="column">
  <h2><img src="http://p3.itc.cn/images01/20200902/4ced6bf85a704fccae0ec202ccaee534.gif" alt="舔狗" width="300" height="200">养狗狗的好处________________________________________________________
    <video width="320" height="280" controls>
      <source src="D:\桌面\WeChat_20220313191949.mp4" type="video/mp4">
    </video>
  </h2>
  
</div>

<div class="column">
  <div id="grad1">
  <div class="card"> 
  <h3>1、少生病</h3>
  <p>养狗狗的人都比较少生病，听起来是无稽之谈，但是这可是经过研究发现的。现规定与没养宠物的人，经常和狗狗相处是可以增强抵抗力的，感觉就像保健品一样……不过平时还是要多注意宠物和家里环境的卫生。</p>
</div>
</div>
</div>
<div class="column">
  <div id="grad1">
  <div class="card"> 
  <h3>2、抗过敏</h3>
  <p>有些家庭认为养宠物会导致孩子过敏，就选择弃养，但事实上每天和狗狗或猫咪接触，可以明显减少婴儿患呼吸道感染的发病率，也减少过敏几率。</p>
</div>
</div>
</div>

<div class="column">
  <div id="grad1">
  <div class="card"> 
  <h3>3、心情变好</h3>
  <p>狗狗是人类最忠实的朋友，它们能察觉到人们的情绪。当你难过、悲伤的时候，狗狗会挨近你给你安慰，当你开心的时候，它们会摇着尾巴冲你笑。研究显示，只要看到可爱的狗狗出现在眼前，所有不开熏的事情马上抛到脑后。</p>
</div>
</div>
</div>
<div class="column">
  <div id="grad1">
  <div class="card"> 
  <h3>4、心脏更健康</h3>
  <p>养狗还能让心脏更健康？你没看错，这也是研究发现的，因为人们在抚摸狗狗的时候，有抚慰人们心灵的感觉，可以有效降低血压。而且经常和狗狗相处可以降低人体心跳速率，对人的健康有益。</p>
</div>
</div>
</div>
<div class="column">
  <div id="grad1">
  <div class="card"> 
  <h3>5、增加运动量</h3>
  <p>这个是大家所共识的，养狗就要常常遛狗，出门散步就增加了不少运动量，身体自然就健康了。而且平时还要和狗狗做一些游戏，陪它们一起跑跳、玩耍，也可以顺便运动。这个游戏时间对于狗狗来说很重要，它们非常享受和主人互动的任何时刻。</p>
</div>
</div>
</div>
<div class="column">
  <div id="grad1">
  <div class="card"> 
  <h3>6、社交生活更活跃　</h3>
  <p>养狗的人在社会中比一般人要更具有信任度，多和狗狗相处还可以增加心灵的正能量，它们的阳光快乐会感染给你，更会刺激并增加你和他人的互动几率。</p>
</div>
</div>
</div>
<div class="column">
  <div id="grad1">
  <div class="card"> 
  <h3>7、侦测癌症　</h3>
  <p>狗狗的鼻子非常灵敏，它们能在糖尿病患者血糖降低时，嗅出其中的化学物质。而且它们还非常神奇的能够闻出癌细胞，有的狗狗会专门训练成癌症侦测犬。</p>
</div>
</div>
</div>
<div class="column">
  <div id="grad1">
  <div class="card"> 
  <h3>8、反映出你自己</h3>
  <p>狗随主人！什么样的人，养什么样的狗。说的不是睡姿啥的，而是性格。你的性格和养的犬种是有非常明显的关联的，比如喜欢玩赏犬的人科学上来讲会比较聪明，养工作犬的孩纸更有良心。同意的举个手。</p>
</div>
</div>
</div>
<div class="column">
  <div id="grad1">
  <div class="card"> 
  <h3>9、上班压力减轻</h3>
  <p>在工作场合和动物互动的人可以减低压力，增进工作满意度和效率。有狗狗相伴，看到它们可爱的样子，所有生活压力和烦恼都会立刻减轻。</p>
</div>
</div>
</div>
<div class="column">
  <div id="grad1">
  <div class="card"> 
  <h3>10、帮你看家</h3>
  <p>自古以来狗狗就是看家护院的好手，有它们帮你看家，又忠实的等你回家，也是铲屎官回家的动力之一。一到家看到它们摇着尾巴欢迎你，这种暖心只有自己能体会。</p>
</div>
</div>
</div>
<div class="footer">
  <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.6oOKw7TgzTGKMz9lELv9xQHaHa?w=170&h=180&c=7&r=0&o=5&dpr=1.65&pid=1.7" alt="狗狗大全" width="50" height="50">
</div>
</body>
</html>